<template>
  <div>
    <div id="mychart3" style=" height:500px"></div>
  </div>
</template>

<script>
var echarts = require('echarts')
export default {
  data () {
    return {}
  },
  methods: {},
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('mychart3'))
    // console.log(myChart)
    myChart.showLoading({
      text: '加载中。。。。',
      color: '#000',
      textColor: '#000',
      maskColor: 'rgba(255, 255, 255, 0.8)',
      zlevel: 0
    })

    window.addEventListener('resize', function () {
      /// /图表响应式
      myChart.resize()
    })
    // 绘制图表
    var option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        x: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [{ value: 335, name: '直接访问' }]
        }
      ]
    }

    myChart.hideLoading()
    myChart.setOption(option)
  }
}
</script>

<style lang="less">
</style>
